<template>
  <div class="container">
    <div style="display: flex;width: 70%;margin-left: 15%;height: 500px">
      <el-card class="left">
        <h3>图书分类</h3>
        <div v-for="(item,index) in bookCategories" :key="index" style="height: 20px">
          <el-divider style="text-align: left"><el-button type="text" style="font-weight: bolder" @click="toCateSearch(item.cate_id)">{{item.name}}</el-button></el-divider>

        </div>


      </el-card>
      <div class="right">
        <el-card style="height: calc(70% - 12px);">
          <el-carousel style="" type="card">
            <el-carousel-item  v-for="(item,index) in headBooks" :key="index" autoplay="false">
              <div style="width: 100%;height: 100%;opacity: 70%;cursor: pointer" v-on:click="toDetail(item.bookId)">
                <img :src="item.imageUrl" style="width: 80%;height: 100%;margin-left: auto">
              </div>
            </el-carousel-item>
          </el-carousel>
<!--          <el-card :body-style="{ padding: '0px' }" style="border-radius: 10px;width: 24%" v-for="(item,index) in books" :key="index">
            <a href="/#/home/bookdetail"><img :src="item.imageUrl" class="image"></a>
            <div style="padding: 10px;">
              <span>{{item.name}}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="button">加入购物车</el-button>
              </div>
            </div>
          </el-card>-->
        </el-card>
        <el-card style="height: 30%;width:100%;display: flex;justify-content:space-between;margin-top: 10px" body-style="margin:0px;width:100%;">
          <div style="display: flex;align-items: center">
            <h3 style="width: 20%">检索书籍</h3>
            <el-input style="width: 70%" v-model="queryString">
              <el-button slot="append" @click="toSearch(queryString)">搜索书籍</el-button>
            </el-input>
          </div>
          <div style="display: flex;align-items: center">
            <h4 style="width: 10%">热门搜索</h4>
            <el-link style="margin: 5px" type="primary" v-for="(item,index) in search_list" :key="index" v-on:click="toSearch(item)">{{item}}</el-link>
          </div>
        </el-card>
      </div>
    </div>
    <div style="display: flex;width: 70%;margin-left: 15%;margin-top: 10px">
      <el-card style="width: 100%">
        <h3>图书列表</h3>
<!--        <div style="display: flex;flex-wrap: wrap;justify-content: space-around">
          <el-card style="margin-top: 10px;width: calc(50% - 10px);" body-style="display:flex" v-for="(item,index) in recommendBooks" :key="index">
            <div style="width: 30%;cursor: pointer" v-on:click="toDetail(item.bookId)">
              <img :src="item.imageUrl" class="image">
            </div>
            <div style="width: 70%">
              <div style="height: 120px">
                <p style="font-weight: bolder">{{item.name}}</p>
                <p><span>{{item.author}}</span>/<span>{{item.press}}</span></p>
              </div>
              <el-button-group>
                <el-button size="small" plain type="primary">加入购物车</el-button>
                <el-button size="small" plain type="danger">直接购买</el-button>
              </el-button-group>
            </div>
          </el-card>
        </div>-->
        <book-list :book-list="recommendBooks"></book-list>
        <el-pagination :current-page="pages" @current-change="change"></el-pagination>
      </el-card>

    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import global from "../../global";
  import BookList from "../../reusable/BookList";
  export default {
    name: "Library",
    components: {BookList},
    mounted() {
      this.getList(this.pages,10)
      this.getHead(10)
    },
    methods:{
      toSearch(param){
        this.$router.push({ path:'/home/search', query:{ queryString:param } })
      },
      toCateSearch(param){
        this.$router.push({ path:'/home/CategorySearch', query:{ cateId:param } })
      },

      toDetail(param){
        this.$router.push({ path:'/home/bookdetail', query:{ bookId:param } })
      },
      change(val){
        this.pages = val;

        this.getList(this.pages,10);
      },
      async getList(page,size){
        let mydata = {
          page: (page-1)*size,
          size: size
        }
        axios.post('/api/book/searchBookByPage',mydata).then((res)=>{
          this.recommendBooks = res.data.data
          console.log(res)
        })

      },
      async getHead(size){
        let mydata = {
          uid:sessionStorage.getItem("userId"),
          page: global.methods.getRandomInt(1,5),
          size: size
        }
        axios.post('/recommend/jiamaoweilie',mydata).then((res)=>{
          this.headBooks = res.data.data
          console.log(res)
        })

      },
    },
    data(){
      return{
        pages:1,
        recommendBooks:[],
        headBooks:[],
        queryString:'',
        search_list:[
          'python',
          'java',
          '村上春树',
          '李佳诚',
          'javascript',
          'sql',
          'c++',
          '卷',
        ],
        bookCategories:[
          {
            name:'哲学宗教类',
            cate_id:1
          },
          {
            name:'科学类',
            cate_id:2
          },
          {
            name:'政治法律类',
            cate_id:3
          },
          {
            name:'军事类',
            cate_id:4
          },
          {
            name:'经济类',
            cate_id:5
          },
          {
            name:'文化教育类',
            cate_id:6
          },
          {
            name:'历史类',
            cate_id:7
          },
          {
            name:'医药卫生类',
            cate_id:8
          },
        ],
      }
    }
  }
</script>

<style scoped>
  .container{
    width: 100%;
  }
  .header{
    background-color: lightgoldenrodyellow;
    height: 150px;
    text-align: center;
  }
  .left{
    width: 25%;
    height: 100%;
  }
  .right{
    width: 75%;
    margin-left: 10px;
    height: 100%;
  }
  .book_card{
    margin: 5px;
    display: flex;
    white-space: normal;
  }
  .image{
    height: 180px;
    width:150px;
  }
</style>
